 <template>
  <!--全屏下落动画组件-->
<!--  <FloatingElements></FloatingElements>-->
  <transition name="page" appear>
    <div class="app-container">
      <router-view></router-view>
    </div>
  </transition>
</template>

<script setup lang="ts">
import FloatingElements from '@/components/floating-elements.vue';
</script>

<style lang="less">
#app {
  width: 100%;
  min-height: 100vh;
}

// 页面初始加载动画
.page-enter-active {
  animation: page-in 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-leave-active {
  animation: page-out 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes page-in {
  0% {
    opacity: 0;
    transform: translateY(15px);  // 稍微减小位移距离
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes page-out {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-15px);  // 稍微减小位移距离
  }
}

// 优化动画性能
.page-enter-active,
.page-leave-active {
  will-change: transform, opacity;
}

// 确保内容容器样式正确
.app-container {
  width: 100%;
  min-height: 100vh;
}
</style>
